<template>
	<view>
		<!--如果想要富文本显示的样式和富文本编辑时的样式保持一致，需要添加 "ql-container" "ql-editor" 这两个样式-->
		<!--富文本编辑器-->
		<!--
			属性
				html : 初始html，可以为空，一般用作回显富文本内容到富文本编辑框
				placeholder : 富文本框初始时，如果没内容，就显示该属性的值
				uploadFileUrl：图片上传地址
			事件
				@editOk：编辑框保存后，触发事件
		-->
		<jinEdit 
			:html="html" 
			placeholder="请输入内容" 
			@editOk="editOk" 
			:uploadFileUrl="'http://localhost:8080/renren-fast/app/upload'">
		</jinEdit> 
	</view>
</template>

<script>
	import jinEdit from '@/components/jin-edit/jin-edit.vue';
	export default { 
		data() {
			return {
				html: '<p><strong>甘大佬、胡成龙、李云飞，广现大神，厚溥之光</strong><img src="http://qq3tc3cea.hn-bkt.clouddn.com/upload/20210413/ca3eb061725548748176ad712aa25d13.jpg" alt="图片" width="336" style=""></p><p><img src="http://qq3tc3cea.hn-bkt.clouddn.com/upload/20210413/9da0847247cc48d0951ce9af32f34bc6.jpg" alt="图片" width="230" style=""></p><p>广现、厚溥能否发扬光大就看你们了</p>',
			}
		},
		methods: {
			//用户点击发布后，会触发该方法
			editOk(res) {
				console.log(res.html)
				this.html = res.html             
			},
		},
		components: {
			jinEdit
		},
	}
</script>
<style></style>